<template>
    <div class="box" >
        <MyMtHeader titleText="我的足迹"/>
        <div class="main">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <div>
                        <img width="100%"  :src="item.img" alt="">
                        <p>价格:{{item.price}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <mt-button v-if="list.length !== 0" @click="list = []" class="clear" type="primary">清空足迹</mt-button>
        </div>
        <div class="show" v-if="list.length === 0">暂无足迹，请先浏览商城！</div>
    </div>
</template>

<script>
import MyMtHeader from '../MyMtHeader/MyMtHeader.vue'
export default {
    components: { MyMtHeader },
    data(){
        return {
            list:[
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/2019-11-11/590fb4b9cfd9282065c47d1cfd920499.jpg',
                    price:73.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/f55b147033d84497a54fd5c34c75e153.jpg',
                    price:25.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/64ccd6b3061c4025bc26860171614e78.jpg',
                    price:66.6
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/2019-11-11/590fb4b9cfd9282065c47d1cfd920499.jpg',
                    price:73.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/f55b147033d84497a54fd5c34c75e153.jpg',
                    price:25.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/64ccd6b3061c4025bc26860171614e78.jpg',
                    price:66.6
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/2019-11-11/590fb4b9cfd9282065c47d1cfd920499.jpg',
                    price:73.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/f55b147033d84497a54fd5c34c75e153.jpg',
                    price:25.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/64ccd6b3061c4025bc26860171614e78.jpg',
                    price:66.6
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/2ad834a8448d4d839d9f1f64b6ee8fea.jpg',
                    price:66.6
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/2019-11-11/590fb4b9cfd9282065c47d1cfd920499.jpg',
                    price:73.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/f55b147033d84497a54fd5c34c75e153.jpg',
                    price:25.5
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/64ccd6b3061c4025bc26860171614e78.jpg',
                    price:66.6
                },
                {
                    img:'http://10.203.0.101:8081/shopping/resources/upload/2ad834a8448d4d839d9f1f64b6ee8fea.jpg',
                    price:66.6
                },
            ]
        }
    }
}
</script>


<style scoped>

.box{
    min-height: 100vh;
    background: #e7e8e861;
}
.main{
    padding-bottom: 15vh;
}

ul{
    display: flex;
    flex-wrap: wrap;
}
li{
    background: white;
    margin: 0px 10px 10px 0px;
    width: 30%;
    height: 140px;
}
li > div{
    padding: 5px;
}
li > div> p{
    font-size: 14px;
    line-height: 16px;
    color: red;
    font-weight: 700;
    text-align: center;
}
.clear{
    position: fixed;
    left: 31vw;
    bottom: 5vh;
    border-radius: 20px;
    width: 150px;
}

</style>